<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<div>
    <ul class="nav nav-pills">
      <li role="presentation" class="active"><a href="{% url 'login' %}">登录</a></li>
     <!-- <li role="presentation"><a href="#">注册</a></li>-->
      <li role="presentation"><a href="{% url 'reg' %}">注册</a></li>
    </ul>
</div>
<div class="container">
  <form class="form-signin" method="post">
    <h2 class="form-signin-heading">登录</h2>
    <label for="inputEmail" class="sr-only">用户名</label>
    <input name="username" type="text" id="username" class="form-control" placeholder="请输入用户名" required="" autofocus=""><span id='user_msg' ></span>
    <label for="inputPassword" class="sr-only">密码</label>
    <input name="password" type="password" id="password" class="form-control" placeholder="请输入密码" required=""><span id='password_msg' ></span>
    <label for="phone" class="sr-only">手机号</label>
    <input type="text" name='phone' id="phone" value='' class="form-control" placeholder="电话" ><span id='phone_msg' ></span>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	  	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" >
	       <input type="text" name='smscode' id='smscode' class="form-control" placeholder="短信验证码" required><span id='msg' ></span>
	    </div>
	  	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6	">
	       <button class="btn btn-lg btn-info btn-block" id="sendsms" type='button' style='font-size:14px;'>获取送验证码</button>
	    </div>
      </div>
    <div class="checkbox">
      <label>
        <input name="remember" type="checkbox" value="remember-me"> 记住用户
      </label>
    </div>
      {{ err }}
    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
  </form>
</div>
<div></div>



  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script>
//短信验证
$(function(){
	$("#smscode").change(function(){
		console.log('开始验证.....');
		//1 获取phone和验证码
		var phone = $("#phone").val();
		var code = $(this).val();
		// 2 ajax
		$.ajax({
			type:'get',
			url:'/check_sms/',
			data:'phone='+phone+'&code='+code,
			success:function(msg){
				//结果已经统一规整为json对象了,不需要转换了
				console.log('结果就是对象'+typeof(msg));
				if(msg.code=='200'){
					$('#msg').html('验证码正确').addClass('green');
				}else{
					$('#msg').html('验证码输入错误')
				}
			},
			error:function(resp){
				console.log(resp.status);
				alert('连接服务器失败')
			}
		})
	})
})
//end 短信验证
</script>

 <script>
$(function(){

//短信验证码
//1. 找标签:btn1
//2. 定时器完成: 显示时间变化!!!
//setInterval(函数, 时间)
//3.难点: 定时器中函数,不断减1, 见到<0终止!!!!
 var btn1 = $('#sendsms');
 var count=5; // 倒计时数量 一般为60秒!
 var timer =null; //定时器
 //事件
btn1.click(function(){
 	phone = $('#phone').val();
 	if(phone==''){
 		alert('请输入电话号码');
 		return false;
 	}
	//Ajax发送短信
	$.ajax({
		type:'get',
		url:'/send_sms/',
		data:'phone='+phone,
		success:function(msg){
			console.log("成功返回结果:"+msg);
			obj = eval("("+msg+")");
			if(obj.Message=="OK"){
				$("#msg").html("发送成功")
			}else{
				$("#msg").html("发送失败")
			}
		},
		error:function(resp){
			console.log(resp.status);
			alert('连接后台失败')
		}
	});
	//end 发送短信


 	//禁用
 	$(this).attr("disabled",'true');
 	var _this=  $(this);
 	//定时器实现时间每次减少1
 	timer = setInterval(function(){
 		count--;
 		console.log("剩余时间:"+count);
 		if(count>=0){
 			//this表示对象!!!! 表示定时器!!!!
 			//this.innerHTML="时间剩余"+ count+"秒";
 			_this.html(count+"秒s后重发")
 		}else{
 			_this.disabled = false;
 			clearInterval(timer);
 			_this.html("重新发送");
 			count=5;
 			$('#sendsms').removeAttr("disabled")
 		}
	 },1000);
})
//短信验证end
})
</script>

<script>
    $(function(){
    //刷新
        $('.captcha').click(function(){
            $.getJSON("duanxin/img_refresh/",function(result){
                $('.captcha').attr('src', result['image_url']);
                $('#id_captcha_0').val(result['hashkey'])
        });
            return false;
    });
    //验证
    $('#id_captcha_1').blur(function(){
        console.log('用户输入的:'+$('#id_captcha_1').val());
            // 获取输入框和隐藏字段id_captcha_0的数值
            code= $('#id_captcha_1').val();
            hashkey=$('#id_reg_captcha_0').val();
            $.getJSON('duanxin/img_check',
            {'code':code,'hashkey':hashkey},function(res){
            //1 验证码正确,0验证码错误
                    console.log(res.status);
            if(res.status){
                $('#but1').attr('type','submit');
                $("#msg").html('验证码正确').addClass('green');
            }else{
                $('#but1').attr('type','button');
                $("#msg").html('验证码错误')
            }
        })
    })
})
</script>
<script type="text/javascript">
        $(function(){
            console.log('验证用户名...页面加载成功');
            //1. 找标签   2 加事件  3DOM操作
            $('#uname').change(function(){

                var uname =$('#uname').val();
                console.log('用户名:'+uname);
                //ajax
                $.ajax({
                   type: "get",
                   url: "http://localhost:8000/duanxin/ajax/",
                   data: "uname="+uname,
                   dataType:"json",

                   success: function(msg){
                     console.log( "返回字符串结果:: " + msg );
                     //处理结果DOM操作
                     //json字符串转化为json对象   obj = eval("("+msg+")")
                     console.log( "返回字符串结果:: " + typeof(msg) );
                     console.log( "返回字符串结果:: " + msg.result);

                     if(msg.result=='ok'&& uname.length>3){
                         $('#uname_msg').html('可用').addClass('green');
                     }else{
                         $('#uname_msg').html('用户名已存在或长度小于3').removeClass('green').addClass('red')
                     }

                   },
                   error:function(msg){
                     console.log(msg);//错误信息对象
                     console.log(msg.status)
                   }
                });
            })
        })
    </script>

<script type="text/javascript">
    $(function(){

        //1. 打开页面时验证必填项
        $('form input.required').each(function(){
            //console.log($(this).val());
            var txt = $(this).val();
            if(txt=='' || txt.length==0){
               //$(this).after("<span class='msg'>*</span>")
               $(this).siblings('span').first().html('*')
            }
        });

        //2. 失去焦点
        $('form :input').blur(function(event) {
            //删除*号
            $(this).parent().find('.msg').remove();

            //用户名
            console.log('是否是用户名:'+$(this).is('#username'));
            if($(this).is('#username')){
                var username = $(this).val();
                if(username=='' || username.length==0 || username.length<2){
                    $('#user_msg').html('用户不合法').removeClass('green').addClass('red');
                    $('#but1').attr('type','button');

                }else{
                    $('#user_msg').html("可用").addClass('green');
                    $('#but1').attr('type','submit');
                }
            }
            //密码
            if($(this).is('#password')){
                var password = $(this).val();
                if(password.length < 5 ){
                    $('#password_msg').html('密码强度低').removeClass('green').addClass('red');
                    $('#but1').attr('type','button');
                }else{
                    $('#password_msg').html('可用').addClass('green');
                    $('#but1').attr('type','submit');
                }
            }
            {#//邮箱#}

            //手机
            if($(this).is('#phone')){
                var Phone = /^1[34578]\d{9}$/;
                var phone = $(this).val();
                if(Phone.test(phone)==false||phone==''){
                    $('#phone_msg').html('请填写正确的手机号').removeClass('green').addClass('red');
                    $('#but1').attr('type','button');
                }else{
                    $('#phone_msg').html('可用').addClass('green');
                    $('#but1').attr('type','submit');
                }
            }
            //密码...手机...邮箱...
        }).keyup(function(event) {
            console.log("抬起直接调用blur......");
            $(this).triggerHandler('blur')
        }).focus(function(event) {
            $(this).triggerHandler('blur')
        });

        //3. 表单提交时.各种规则验证
        $('form').submit(function(event) {
            var isGo= true;
            //判断,失败标记值=false
            $("input.required").each(function(){
                zhi = $(this).val().trim();//去空格
                if(zhi==''||zhi.length==0){
                    isGo= false;
                }
            });
            return isGo;

        });

    })

</script>


</body>
</html>